<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb :routes="routes">
        <template slot="itemRender" slot-scope="{ route, routes, paths }">
          <span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
          <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{ route.breadcrumbName }}</router-link>
        </template>
      </a-breadcrumb>
    </div>
    <div id="content">
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <!-- 基础信息 -->
        <a-card>
          <div class="card-title">基础信息</div>
          <a-row :gutter="[20]">
            <a-col :span="12">
              <a-form-model-item label="起运港口" prop="protName">
                <a-input v-model="form.protName" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="[20]">
            <a-col :span="12">
              <a-form-model-item label="门点地址" prop="province">
                <a-cascader
                  :options="options"
                  :fieldNames="{label: 'area', value: 'area', children: 'childList'}"
                  placeholder="省/市/区县"
                  @change="onChange"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item>
                <a-input placeholder="门点详细地址" v-model="form.address" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <!-- 装货费用 -->
        <a-card>
          <div class="card-title">装货费用</div>
          <a-table :columns="columns" :data-source="data" bordered :pagination="false">
            <template
              v-for="col in ['containerType', 'basePrice', 'packagePrice', 'remark']"
              :slot="col"
              slot-scope="text, record"
            >
              <!-- <div :key="col">
                <a-input
                  style="margin: -5px 0"
                  :value="text"
                  @change="e => handleChange(e.target.value, record.key, col)"
                />
              </div>-->
              <div v-if="col === 'containerType' || col === 'remark'" :key="col">
                <a-input
                  style="margin: -5px 0"
                  :value="text"
                  @change="e => handleChange(e.target.value, record.key, col)"
                />
              </div>
              <div v-else :key="col">
                <a-input-number
                  :min="0"
                  :max="999999999999.99"
                  :precision="2"
                  :value="text"
                  style="margin:-5px 0;width:100%"
                  @change="e => handleChange(e, record.key, col)"
                />
              </div>
            </template>
            <template slot="operation" slot-scope="text, record">
              <div class="editable-row-operations">
                <a-popconfirm v-if="data.length" title="确定删除吗？" @confirm="() => del(record)">
                  <a href="javascript:;">删除</a>
                </a-popconfirm>
              </div>
            </template>
          </a-table>
          <a-button type="dashed" block @click="handleAdd" style="margin-top:20px">+ 添加箱型费用</a-button>
        </a-card>
        <!-- 送货费用 -->
        <a-card>
          <div class="card-title">送货费用</div>
          <a-table :columns="columns2" :data-source="data2" bordered :pagination="false">
            <template
              v-for="col in ['containerType', 'basePrice', 'packagePrice', 'remark']"
              :slot="col"
              slot-scope="text, record"
            >
              <!-- <div :key="col">
                <a-input
                  style="margin: -5px 0"
                  :value="text"
                  @change="e => handleChange2(e.target.value, record.key, col)"
                />
              </div>-->
              <div v-if="col === 'containerType' || col === 'remark'" :key="col">
                <a-input
                  style="margin: -5px 0"
                  :value="text"
                  @change="e => handleChange2(e.target.value, record.key, col)"
                />
              </div>
              <div v-else :key="col">
                <a-input-number
                  :min="0"
                  :max="999999999999.99"
                  :precision="2"
                  :value="text"
                  style="margin:-5px 0;width:100%"
                  @change="e => handleChange2(e, record.key, col)"
                />
              </div>
            </template>
            <template slot="operation" slot-scope="text, record">
              <div class="editable-row-operations">
                <a-popconfirm v-if="data.length" title="确定删除吗？" @confirm="() => del2(record)">
                  <a href="javascript:;">删除</a>
                </a-popconfirm>
              </div>
            </template>
          </a-table>
          <a-button type="dashed" block @click="handleAdd2" style="margin-top:20px">+ 添加箱型费用</a-button>
        </a-card>
        <a-form-model-item>
          <div class="creat_button">
            <a-button type="primary" @click="save" style="float:right;margin-top:12px">保存</a-button>
            <a-button @click="cancel" style="float:right;margin:12px 12px 0 0">取消</a-button>
          </div>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>
<script>
import { queryBaseAreaList } from '@/api'
import { addTruckDistance } from '@/api/landCenter'

const fomrMessage = `必填项不能为空`

export default {
  data () {
    const columns = [
      {
        title: '箱型',
        dataIndex: 'containerType',
        scopedSlots: { customRender: 'containerType' }
      },
      {
        title: '基础价格(元)',
        dataIndex: 'basePrice',
        scopedSlots: { customRender: 'basePrice' }
      },
      {
        title: '套箱价格(元)',
        dataIndex: 'packagePrice',
        scopedSlots: { customRender: 'packagePrice' }
      },
      {
        title: '备注',
        dataIndex: 'remark',
        scopedSlots: { customRender: 'remark' }
      },
      {
        title: '',
        width: '80px',
        dataIndex: 'operation',
        scopedSlots: { customRender: 'operation' }
      }
    ]
    const data = []
    for (let i = 0; i < 3; i++) {
      let obj = {
        key: i.toString(),
        containerType: '',
        basePrice: '',
        packagePrice: '',
        remark: ''
      }
      if (i === 0) {
        obj.containerType = '20GP'
      } else if (i === 1) {
        obj.containerType = '20GP短板'
      } else if (i === 2) {
        obj.containerType = '40GP/HQ'
      }
      data.push(obj)
    }
    const columns2 = [
      {
        title: '箱型',
        dataIndex: 'containerType',
        scopedSlots: { customRender: 'containerType' }
      },
      {
        title: '基础价格(元)',
        dataIndex: 'basePrice',
        scopedSlots: { customRender: 'basePrice' }
      },
      {
        title: '拆箱价格(元)',
        dataIndex: 'packagePrice',
        scopedSlots: { customRender: 'packagePrice' }
      },
      {
        title: '备注',
        dataIndex: 'remark',
        scopedSlots: { customRender: 'remark' }
      },
      {
        title: '',
        width: '80px',
        dataIndex: 'operation',
        scopedSlots: { customRender: 'operation' }
      }
    ]
    const data2 = []
    for (let i = 0; i < 4; i++) {
      let obj = {
        key: i.toString(),
        containerType: '',
        basePrice: '',
        packagePrice: '',
        remark: ''
      }
      if (i === 0) {
        obj.containerType = '20GP'
      } else if (i === 1) {
        obj.containerType = '20GP短板'
      } else if (i === 2) {
        obj.containerType = '40GP/HQ'
      } else if (i === 3) {
        obj.containerType = '20GP自卸'
      }
      data2.push(obj)
    }
    return {
      basePath: '/landCenter',
      routes: [
        {
          path: '/trailerFeeManagement',
          breadcrumbName: '拖车费管理'
        },
        {
          path: '',
          breadcrumbName: '添加拖车费'
        }
      ],
      labelCol: { span: 7 },
      wrapperCol: { span: 17 },
      limitNumber: 20,
      form: {
        protName: '',
        province: '',
        city: '',
        area: '',
        address: ''
      },
      rules: {
        protName: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        province: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ]
      },
      loading: true,
      options: [],
      columns,
      data,
      count: 3,
      columns2,
      data2,
      count2: 4
    }
  },
  methods: {
    addTruckFee (e) {
      let _this = this
      addTruckDistance(e)
        .then(res => {
          if (res.code === 0) {
            _this.$message.success('提交成功！')
            setTimeout(() => {
              _this.$router.push({ path: '/landCenter/trailerFeeManagement' })
            }, 1000)
          }
        })
        .catch(rs => {})
    },
    queryAddress () {
      queryBaseAreaList({})
        .then(res => {
          this.options = res.data
        })
        .catch(rs => {})
    },
    onChange (value, selectedOptions) {
      this.form.province = value[0]
      this.form.city = value[1]
      this.form.area = value[2]
    },
    del (e) {
      // // console.log(e)
      // // console.log(this.data)
      let index = this.data.indexOf(e)
      if (index !== -1) {
        this.data.splice(index, 1)
        this.$message.success('删除成功!')
      }
    },
    handleChange (value, key, column) {
      // // console.log(value)
      // // console.log(key)
      // // console.log(column)
      const newData = [...this.data]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        target[column] = value
        this.data = newData
      }
    },
    handleAdd () {
      const { count, data } = this
      const newData = {
        key: count,
        containerType: '',
        basePrice: '',
        packagePrice: '',
        remark: ''
      }
      this.data = [...data, newData]
      this.count = count + 1
    },
    del2 (e) {
      let index = this.data2.indexOf(e)
      if (index !== -1) {
        this.data2.splice(index, 1)
        this.$message.success('删除成功!')
      }
    },
    handleChange2 (value, key, column) {
      const newData = [...this.data2]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        target[column] = value
        this.data2 = newData
      }
    },
    handleAdd2 () {
      const { count2, data2 } = this
      const newData2 = {
        key: count2,
        containerType: '',
        basePrice: '',
        packagePrice: '',
        remark: ''
      }
      this.data2 = [...data2, newData2]
      this.count2 = count2 + 1
    },
    save () {
      if (!this.$root._bc.create) {
        this.$message.error('您无此权限！')
        return
      }
      let _this = this
      let data = _this.data.filter(item => item.containerType)
      let data2 = _this.data2.filter(item => item.containerType)
      _this.$refs.form.validate(valid => {
        if (valid) {
          _this.$confirm({
            title: '确定提交以上信息吗？',
            onOk () {
              _this.addTruckFee({
                ..._this.form,
                'loadingList': data,
                'deliveryList': data2
              })
            },
            onCancel () {}
          })
        }
      })
    },
    cancel () {
      let _this = this
      _this.$confirm({
        title: '还有未保存的信息，退出后编辑的数据将消失，确定退出？',
        onOk () {
          _this.$router.push({ path: '/landCenter/trailerFeeManagement' })
        },
        onCancel () {}
      })
    }
  },
  mounted () {
    this.queryAddress()
  }
}
</script>
<style lang="less" scoped>
#content {
  margin: 24px;
  .ant-card {
    margin-bottom: 24px;
    border: none;
    .card-title {
      position: relative;
      padding-left: 16px;
      font-size: 18px;
      line-height: 1;
      color: #000;
      margin-bottom: 20px;
      &:before {
        content: '';
        width: 5px;
        height: 18px;
        background: #1890ff;
        border-radius: 4px;
        position: absolute;
        left: 0;
        top: -1px;
      }
    }
    span {
      display: inline-block;
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
